<template>
  <div
    class="u-text"
    @click="$emit('click')"
    :class="[
      cursor ? (disabled ? 'not-allowed' : 'cursor-pointer') : '',
      `u-text--${type}`,
      {
        'is-disabled': disabled,
      },
    ]"
  >
    <u-svg
      v-if="icon"
      :icon="icon"
      :fill="fill"
      style="margin-right: 8px"
      :size="16"
    ></u-svg>
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: "primary",
      validator: (val) =>
        [
          "primary",
          "success",
          "gray",
          "default",
          "danger",
          "disabled",
        ].includes(val),
    },
    icon: {
      type: String,
      default: "",
    },
    fill: {
      type: String,
      default: "currentColor",
    },
    cursor: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
<style lang="scss" scoped>
.u-text {
  display: inline-flex;
  align-items: center;
  &.is-disabled {
    opacity: 0.7;
  }

  &--primary {
    color: var(--u-second-primary);
  }

  &--success {
    color: var(--u-color-green);
  }

  &--danger {
    color: var(--u-color-red);
  }

  &--default {
    color: var(--u-color-fff);
  }

  &--gray {
    color: var(--u-color-gray);
  }

  &--disabled {
    color: var(--u-color-disabled);
  }
}
</style>
